<template>
  <el-dialog v-model="obj.visible"
             width="50%"
             :show-close="false"
             style="padding: 0"
             draggable
             :close-on-click-modal="false"
             :close-on-press-escape="false"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="header">
        <span>{{ obj.title }}</span>
        <el-link @click="close" :underline="false">
          <el-icon style="color: white">
            <Close/>
          </el-icon>
        </el-link>
      </div>
    </template>
    <div style="padding: 10px 50px">
      <el-form
          :model="obj.form"
          ref="ruleForm"
          :rules="obj.rules"
          label-width="auto"
      >
        <el-form-item v-for="(field,index) in obj.fields" :label="field.label" :error="obj.errors[field.name]"
                      :prop="field.name">
          <el-input v-if="field.wiget==='input'" v-model="obj.form[field.name]"
                    :placeholder="'请输入'+field.label"></el-input>
          <el-input v-if="field.wiget==='textarea'" type="textarea" v-model="obj.form[field.name]"
                    :placeholder="'请输入'+field.label"></el-input>
          <el-input v-if="field.wiget==='password'" type="password" v-model="obj.form[field.name]"
                    :placeholder="'请输入'+field.label"></el-input>
          <el-radio-group v-if="field.wiget==='radio_icon'" v-model="obj.form[field.name]">
            <el-radio v-for="item in obj.options[field.name]" :value="item.name">
              <el-icon>
                <component :is="item.name"/>
              </el-icon>
            </el-radio>
          </el-radio-group>
          <el-color-picker v-if="field.wiget==='color_picker'" v-model="obj.form[field.name]"/>
          <el-radio-group v-if="field.wiget==='radio'" v-model="obj.form[field.name]">
            <el-radio v-for="item in obj.options[field.name]" :value="item.id">
              {{ item.title }}
            </el-radio>
          </el-radio-group>
          <el-switch v-if="field.wiget==='switch'" v-model="obj.form[field.name]" inline-prompt active-text="是"
                     inactive-text="否"/>
          <el-select v-if="field.wiget==='select_multi'" v-model="obj.form[field.name]" multiple placeholder="请选择">
            <el-option v-for="item in obj.options[field.name]" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
          <el-tree-select v-if="field.wiget==='tree_select'" v-model="obj.form[field.name]" :data="obj.data"
                          check-strictly
                          :render-after-expand="false"
                          show-checkbox
                          check-on-click-node
                          :props="{value:'id',label:'title'}"
                          node-key="id"
                          default-expand-all
                          highlight-current
                          filterable
                          clearable
                          placeholder="请选择">
          </el-tree-select>
          <el-select v-if="field.wiget==='select'" clearable filterable v-model="obj.form[field.name]"
                     placeholder="请选择">
            <el-option v-for="item in obj.options[field.name]" :key="item.id" :label="item.title" :value="item.id"/>
          </el-select>
          <el-checkbox-group v-if="field.wiget==='checkbox'" v-model="obj.form[field.name]">
            <el-checkbox v-for="item in obj.options[field.name]" :label="item.name" :value="item.id"/>
          </el-checkbox-group>
        </el-form-item>
        <el-row :gutter="50" justify="center" align="middle" style="height: 80px">
          <el-form-item>
            <el-button @click="obj.doSubmit" type="primary" style="width: 150px;height: 40px">提 交</el-button>
            <el-button @click="obj.visible = false" type="primary" style="width: 150px;height: 40px">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref} from "vue";

const ruleForm = ref()
defineProps(['obj'])
defineExpose({ruleForm})
</script>

<style scoped>
.header {
  color: #FFFFFF;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: rgb(51.2, 126.4, 204);

}
</style>